import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
import axios from '../../utils/http'

function Bar(props: any) {
  console.log('fada', props)

  const { getNmae } = props
  function echartInit(node: any) {
    const myChart = echarts.init(node)
    // 绘制图表
    // 利用高德api获取行政区边界geoJson
    // adcode 行政区code 编号
    //处理数据
    axios({
      url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100_full.json',
    }).then((res: any) => {
      console.log(res)
      proceData(res.features)
    })
    function proceData(Json: any) {
      let mapData = [
        {
          name: '甘孜藏族自治州',
          cityCode: '513300',
          value: '460',
        },
        {
          name: '简阳市',
          cityCode: '511100',
          value: '11372',
        },
        {
          name: '成都市',
          cityCode: '510100',
          value: '4543',
        },
      ]
      Json.map((item: any) => {
        mapData.forEach((ele: any) => {
          if (item.properties.adcode == ele.cityCode) {
            ele.level = item.properties.level
          }
        })
      })
      let mapJson: any = {}
      //geoJson必须这种格式
      mapJson.features = Json

      //去渲染echarts
      initEcharts(mapData, mapJson)
    }

    function initEcharts(mapData: any, mapJson: any) {
      let valArr: any = []
      mapData.map(function (i: any) {
        valArr.push(i.value)
      })
      // 计算数据最大与最小值用于数据映射组件
      let max = Math.max.apply(null, valArr)
      let min = Math.min.apply(null, valArr)
      //注册
      echarts.registerMap('Map', mapJson)

      //这里加true是为了让地图重新绘制，不然如果有筛选的时候地图会飞出去
      myChart.setOption(
        {
          backgroundColor: '',
          tooltip: {
            trigger: 'item',
          },
          series: [
            //地图点的动画效果
            {
              name: '地图',
              type: 'map',
              map: 'Map',
              roam: false, //是否可缩放
              zoom: 1, //缩放比例
              aspectScale: 0.9, //长宽比0.75
              data: mapData,
              itemStyle: {
                normal: {
                  borderColor: '#fff',
                  borderWidth: 2,
                  areaColor: '#a8b4c4',
                },
                emphasis: {
                  areaColor: '#ffb64d',
                  borderWidth: 0,
                },
              },
              label: {
                normal: {
                  show: true, //显示省份标签
                  textStyle: {
                    color: '#000', //省份标签字体颜色
                    fontSize: 12,
                  },
                },
                emphasis: {
                  //对应的鼠标悬浮效果
                  areaColor: '#ffb64d',
                  show: true,
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
            },
          ],
        },
        true
      )
      // 单击下钻
      myChart.on('click', function (params) {
        // console.log(params.name)
        getNmae(params.name)
      })
    }
  }
  // 1. 先不考虑传参问题  静态数据渲染到页面中
  // 2. 把那些用户可能定制的参数 抽象props (1.定制大小 2.data 以及说明文字)
  const nodeRef = useRef(null)
  useEffect(() => {
    echartInit(nodeRef.current)
  }, [])

  return <div ref={nodeRef} style={{ width: '500px', height: '500px',marginLeft:'100px' }}></div>
}

export default Bar
